<template>
	<view class="confirm p-t-30" v-if="!empty">
		
		<view class="express m-lr-30 br-10 bg-w" v-if="distribution=='address'">
			<view class="express p-lr-30 p-tb-40">
				<view class="flex" @tap="jump('/pages/user/address/list', { from: 'order' })">
					
					<view class="l" v-if="!orderDetail.user_address">请选择收货地址</view>
					<view v-else>
						<view class="tb m-b-10">
							<text>{{orderDetail.user_address.consignee}}</text>
							<text>{{orderDetail.user_address.phone}}</text>
						</view>
						<view :style="'color:#808080;'">{{orderDetail.user_address.city + orderDetail.user_address.address}}</view>
					</view>
					<text :class="orderDetail.user_address?'m-l-auto xyicon icon-right m-t-30':'m-l-auto xyicon icon-right'" :style="'color:#808080;'"></text>
				</view>
			</view>
		</view>

    <view class="express m-lr-30 br-10 bg-w" v-if="distribution=='take'">
      <view class="express p-lr-30 p-tb-40">
        <view class="flex flex-nowarp" @tap="jump('/pages/user/address/take_list')">

          <view class="l" v-if="!take.realname">请选择自提点</view>
          <view v-else>
            <view class="tb m-b-10">
              <text>{{take.realname}}</text>
              <text>{{take.mobile}}</text>
            </view>
            <view :style="'color:#808080;'">{{take.address}}</view>
          </view>
          <text :class="take.address?'m-l-auto xyicon icon-right m-t-30':'m-l-auto xyicon icon-right'" :style="'color:#808080;'"></text>
        </view>
      </view>
    </view>
		
		<view class="goods m-30 p-lr-30 br-10 bg-w">
			<view v-for="(g,index) in orderDetail.order_goods_list" :key="index" :style="'border-color:#f7f7f7;'" :class="'item p-tb-30 flex '+(index == orderDetail.order_goods_list.length-1?'':'bl-b')">
				<view class="l ovh br-10">
					<image :src="g.detail.current_sku_price.image ? g.detail.current_sku_price.image : g.detail.image" mode="widthFix" />
				</view>
				<view class="r psr m-l-20">
					<view class="tb lh-40 goods-title">
						{{g.detail.title}}
					</view>
					<view class="sku-text m-t-20" v-if="g.detail.current_sku_price && g.detail.current_sku_price.goods_sku_text">
						<text class="sku-text ts-24 lh-24 br-10 p-lr-25 p-tb-" :style="'background-color: #f7f7f7;'+'color:#808080;'">
						  {{g.detail.current_sku_price && g.detail.current_sku_price.goods_sku_text ? g.detail.current_sku_price.goods_sku_text : ""}}
						</text>
					</view>
					<view class="price-box flex psa lh-34">
						<text :style="'color:#ff5335;'">￥</text>
						<text :style="'color:#ff5335;'" class="ts-34 tb">{{ g.detail.current_sku_price.price }}</text>
						<text class="m-l-auto">x{{ g.buy_num }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="m-30 p-30 br-10 bg-w">
			<view class="flex tb">
				<view>原订单金额</view>
				<view class="m-l-auto">￥{{ orderDetail.original || "0.00" }}</view>
			</view>
      <view class="flex tb m-t-30 ali-cen" style="color:#7e7e7e;">
        <view class="ts-22">权益卡剩余免费下单该商品数量</view>
        <view class="ts-22 m-l-auto">{{ orderDetail.max_discount || "0" }}件</view>
      </view>
		</view>

    <view class="m-30 p-30 br-10 bg-w">
      <view class="flex tb just-sb">
        <view>配送方式</view>
        <view class="flex ts-24 ali-cen">
          <view @tap="distributionCheck('address')" class="m-r-40">
            配送到家
            <text class="yz-iconfont yz-gouxuan ts-30 lh-30 m-l-10" style="color:#4caf50;" v-if="distribution=='address'"></text>
            <text class="yz-iconfont yz-yuanxingweixuanzhong ts-30 lh-30 m-l-10" style="color: gray;" v-else></text>
          </view>
          <view @tap="distributionCheck('take')">
            到店自提
            <text class="yz-iconfont yz-gouxuan ts-30 lh-30 m-l-10" style="color:#4caf50;" v-if="distribution=='take'"></text>
            <text class="yz-iconfont yz-yuanxingweixuanzhong ts-30 lh-30 m-l-10" style="color: gray;" v-else></text>
          </view>
        </view>
      </view>
    </view>


    <view class="m-30 p-30 br-10 bg-w">
        <input value="" class="ts-24 wa" placeholder="将您的要求告诉我,我将提前为您准备" @input="remarkChange"></input>
    </view>
		
		<view class="bottom-fixed flex tc bg-w">
			<view class="p-lr-30 p-tb-15 flex tc wa">
				<view class="flex lh-34 m-t-20">
					<text :style="'color:#808080;'">共{{ orderDetail.total_num }}件</text>
				</view>
				
				<view class="action flex m-l-auto">
					<view class=" lh-42 p-t-15 ts-36 m-r-30"><text class="ts-28">实际支付：</text><text class="ts-26" :style="'color:#ff5335;'">¥</text><text :style="'color:#ff5335;'">{{ orderDetail.total_fee || "0.00" }}</text></view>
					<view class="sub-order m-l-auto tc-w" :style="'background-color: #00dd83;'" @tap="goPay()">
						提交订单
					</view>
				</view>
				
			</view>
		</view>

    <payPop ref='payPop' @createOrder="subOrder"></payPop>

	</view>
</template>

<script>
	import { mapState } from 'vuex';
  import payPop from '@/components/paypop/index.vue';
  import Pay from '@/utils/pay';
	export default {
		components: {
      payPop
		},
		data() {
			return {
				empty:true,
				goodsList:[], //传递过来的参数
				from:"", //传递过来的参数
				orderType:"", //传递过来的参数
				orderDetail:[], //订单详情
				order:null,//支付订单
        distribution: 'address',
        take_id: '',
        remark: '',
        take: {}
			}
		},
		computed: {
			...mapState(['common','user'])
		},
		async onLoad() {
			
			var query = this.$Route.query;
			this.goodsList = query.goodsList;
			this.from = query.from;
			this.orderType = query.orderType;

			this.loadData();
		},
		methods: {
			
			async loadData(){
				this.$api.post({
					url: '/goods_order/init',
					loadingTip:'加载中...',
					data: {
						goods_list:this.goodsList,
					},
					success: res => {
						this.empty = false;
						this.orderDetail = res;
					},
					fail:res=>{
						setTimeout(()=>{
							uni.navigateBack();
						},2000)
					}
				});
			},
			
			jump(path, parmas) {
			  this.$Router.push({
			    path: path,
			    query: parmas,
			  });
			},

      //备注修改
      remarkChange(e){
        this.remark = e.detail.value;
      },

      //支付方式选择
      distributionCheck(type){
          this.distribution = type;
      },

      //选择自提点
      pickTake(item){
        this.take = item;
      },

      goPay() {
        if(this.user.isLogin){
          this.$refs.payPop.showDiaLog(this.orderDetail.total_fee)
        }else{
          this.$xyfun.toLogin();
        }

      },

			//提交订单
			subOrder(pay_type){
        var that = this;
				this.$api.post({
					url: '/goods_order/add',
					loadingTip:'加载中...',
					data: {
						goods_list: this.goodsList,
						from: this.from,
						order_type: this.orderType,
            pay_type : pay_type,
            distribution: this.distribution,
            take_id: this.take?.id?this.take.id:'',
            remark: this.remark
					},
					success: res => {
            //发起支付
            var pay = new Pay(pay_type, res, 'goods', false,false);
            pay.payMehod().then((res)=>{
              that.$refs.payPop.disabled = false;
              pay.payResult(res);
            },(res)=>{
              that.$refs.payPop.disabled = false;
              pay.payResult(res);
            });
					},fail: res=>{
            that.$refs.payPop.disabled = false;
          }
				});
			}
			
		}
	}
</script>

<style>
page{
  background: #ececec;
}
</style>
<style scoped lang="scss">
.line {
  height: 4rpx;
  width: 34%;
  margin: 0 auto;
}

.goods {
  .item {
    .l {
      width: 178rpx;
      height: 178rpx;

      image {
        width: 178rpx;
      }
    }

    .r {
      width: 432rpx;

      .price-box {
        bottom: 3rpx;
        width: 100%;
      }
    }
  }

  .goods-title {
    max-height: 80rpx;
    overflow: hidden;
  }
}

.bottom-fixed {
  .sub-order {
    width: 260rpx;
    height: 74rpx;
    border-radius: 37rpx;
    line-height: 74rpx;
  }
}

.pay-model-box {
  width: 80%;
}
</style>